<template>
	<view class='notification'>
		<view class="list">
			<view class="item" v-for='(item, index) in list' :key='index'>
				<view class="pic">
					<image class="avatar" src="/static/imgs/home_tab_error_sel.png"></image>
				</view>
				<view class="info">
					<view class="no">
						<text class="no-num">{{item.id}}</text>
						<text class="time">{{item.created_at.split(' ')[1]}}</text>
					</view>
					<view class="desc">
						<text class="sub">{{item.content}}</text>
						<view class="btn">{{item.type}}</view>
					</view>
				</view>
			</view>
			<view v-if="!isEmpty">
				<load-more :status="loadStatus" color="#333333"></load-more>
			</view>
			<view v-if="isEmpty" class="empty-bar">暂无数据</view>
		</view>
	</view>
</template>

<script>
	import LoadMore from '@/components/uni-load-more/uni-load-more'
	import {
		smsList
	} from '@/api/config'
	export default {
		data() {
			return {
				list: [], // 通知列表
				page: 1,
				requestKey: true, // 请求开关
				isEmpty: false, // 是否为空
				loadStatus: 'more', // more loading noMore
			};
		},
		components: {
			LoadMore
		},
		onPullDownRefresh() {
			this.init()
			this.getSmsList()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 800)
		},
		onReachBottom() {
			if (!this.requestKey) return
			this.page++
			this.getSmsList()
		},
		onLoad() {
			this.getSmsList()
		},
		methods: {
			// 初始化
			init() {
				this.page = 1
				this.isEmpty = false
				this.list = []
				this.requestKey = true
			},
			// 获取通知列表
			async getSmsList() {
				const params = {
					page: this.page
				}
				this.loadStatus = 'loading'
				const [err, res] = await smsList(params)
				if (res) {
					const list = res.data.data
					if (list.length == 0 && this.page == 1) {
						this.requestKey = false
						this.isEmpty = true
						return
					} else if (list.length == 0 && this.page > 1) {
						this.requestKey = false
						this.loadStatus = 'noMore'
						return
					}
					this.list = this.list.concat(list)
					if (list.length < res.data.per_page) {
						this.requestKey = false
						this.loadStatus = 'noMore'
					} else {
						this.loadStatus = 'more'
					}
				}
				if (err) {
					this.requestKey = false
					this.isEmpty = true
				}
			}
		}
	}
</script>

<style lang="scss">
	@import '@/static/scss/config.scss';
	@import '@/static/scss/mixin.scss';

	page {
		background-color: $bg-b;
	}

	.notification {
		@include box-w(100%);
		
		.empty-bar {
			@include flex-row();
			@include font-set($font-b, $color-h);
		}

		.list {
			@include box-w(100%, $bg-a);
			padding: 0 30rpx;

			.item {
				@include box(100%, 160rpx);
				padding: 30rpx 0;
				@include flex-row(space-between);

				&~.item {
					border-top: 1rpx solid $bg-l;
				}

				.pic {
					@include circle(100rpx, $bg-b);
					@include flex-row();

					.avatar {
						@include square(52rpx);
					}
				}

				.info {
					@include box-w(566rpx);

					.no {
						@include box-w();
						@include flex-row(space-between);

						.no-num {
							@include font-set($font-c, $color-e);
						}

						.time {
							@include font-set($font-b, $color-e);
						}
					}

					.desc {
						@include box-w();
						@include flex-row(space-between);
						margin-top: 4rpx;

						.sub {
							@include font-set($font-b, $color-c);
						}

						.btn {
							@include box(84rpx, 40rpx, $bg-o);
							border-radius: 20rpx;
							@include flex-row();
							@include font-set($font-a, $color-a);
						}
					}
				}
			}
		}
	}
</style>
